fix(templates): Fixing overlapping of callouts for v8 and v9 components#8897
fix(templates): Fixing overlapping of callouts for v8 and v9 components#8897preetriti1 merged 7 commits intomainfrom
Conversation
🤖 AI PR Validation ReportPR Review ResultsThank you for your submission! Here's detailed feedback on your PR title and body compliance:✅ PR Title
✅ Commit Type
✅ Risk Level
✅ What & Why
✅ Impact of Change
✅ Test Plan
✅ Contributors
|
| Section | Status | Recommendation |
|---|---|---|
| Title | ✅ | Optional: make title slightly more specific (mention mountNode / panels). |
| Commit Type | ✅ | No change needed. |
| Risk Level | ✅ | Medium is appropriate given UI/layout changes. |
| What & Why | ✅ | Optional: list primary files changed for quick reference. |
| Impact of Change | ✅ | Clarify that mountNode is now expected at callers; expand "System" detail. |
| Test Plan | ✅ | Tests are present in diff; mention manual test environment. |
| Contributors | ✅ | Good. |
| Screenshots/Videos | Add before/after visuals for UI changes. |
Final Message
This PR passes the PR title and body template checks. The risk level declared (Medium) matches the changes introduced by the diff. A few optional improvements will speed review and reduce follow-up questions:
- Clarify in Impact/Developers that mountNode is now part of the panel API (callers must pass a container ref) and whether this is backward-compatible. If mountNode is required, call this out explicitly.
- Add one or two before/after screenshots or a short video showing the overlay/callout behavior before and after the change.
- Optionally make the title slightly more specific to mention mounting panels to a container (helps reviewers and release notes).
- Add brief manual test environment details (browser/OS/CI pipeline used).
Please update the PR description with any clarifications above if desired, then proceed. Thank you for the thorough tests and clear explanation — this looks ready for functional review/merge from a PR-description perspective.
Last updated: Thu, 12 Mar 2026 19:30:32 GMT
There was a problem hiding this comment.
Pull request overview
This PR fixes an overlay/stacking issue in the Templates UI where Fluent UI v8 components (dropdowns, callouts, comboboxes) were not properly displaying inside Fluent UI v9 panels. The fix mounts the v9 Drawer components into a specific container DOM node instead of the document body, using the mountNode prop, and adds position: 'fixed' to the drawer styles to ensure correct overlay behavior.
Changes:
- Added
mountNodeprop toQuickViewPanelandCreateWorkflowPanel, wrapping each usage in aposition: relativecontainer whose DOM node is passed as the mount target - Changed outer wrapper from fragment (
<>) to<div>in several view components to support proper DOM containment - Added
position: 'fixed'to both drawer style definitions to fix overlay positioning
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
quickViewPanel.tsx |
Added required mountNode: HTMLElement | null prop; passes it to the Fluent UI v9 Drawer; sets type={'overlay'} |
quickViewPanel.styles.ts |
Added position: 'fixed' to the drawer style |
createWorkflowPanel.tsx |
Added required mountNode: HTMLElement | null prop; passes it to the Fluent UI v9 Drawer; sets type={'overlay'} |
createWorkflowPanel.styles.ts |
Added position: 'fixed' to the drawer style |
templateview.tsx |
Wraps panels in a position: relative div with a useRef to supply mountNode; imports useRef |
templateoverview.tsx |
Same pattern as templateview.tsx; uses useRef for container div passed as mountNode |
templatesfullgalleryview.tsx |
Wraps QuickViewPanel/CreateWorkflowPanel in ref-tracked div; adds unused panelRef type to WorkflowView |
libs/designer/src/lib/ui/panel/templatePanel/quickViewPanel/quickViewPanel.tsx
Show resolved
Hide resolved
libs/designer/src/lib/ui/panel/templatePanel/createWorkflowPanel/createWorkflowPanel.tsx
Show resolved
Hide resolved
📊 Coverage CheckThe following changed files need attention:
Please add tests for the uncovered files before merging. |
Commit Type
Risk Level
What & Why
"What: Panels (QuickView/CreateWorkflow and template overview/single template views) now mount to a provided container (mountNode) so v8 callouts render correctly inside v9 panels.
Why: to prevent callouts/overlays from appearing underneath new panel layer structure and fix overlay/positioning issues.
TODO/Follow-up: The CreateWorkflow panel changing CSS on open (making it non-auto-dismissible) is tracked in ISSUE-#8903 and will be addressed separately (P2)."
Impact of Change
Test Plan
Contributors
@Eric-B-Wu @rllyy97
Screenshots/Videos